<template>
  <div class="set-pay">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar :title="title" />
    <view class="van-form">
      <div v-if="type < 3">
        <div class="van-cell-row">
          <div class="row-lable">
            {{ type | fixType }}账号
          </div>
          <u-input v-model="pay.account_num" name="account_num" clearable :disabled="pay.is_up === 1"
            :placeholder="'请输入'+(type == 1 ? '支付宝' : type == 2 ? '微信' : '')+'账号'"
            :rules="[{ validator: accountValidator, message: '请输入正确内容' }]" />
        </div>
        <div class="van-cell-row">
          <div class="row-lable">
            {{ type | fixType }}昵称
          </div>
          <u-input v-model="pay.name" name="name" clearable :disabled="pay.is_up === 1"
            :placeholder="'请输入'+(type == 1 ? '支付宝' : type == 2 ? '微信' : '')+'昵称'"
            :rules="[{ required:true, message: '请输入正确内容' }]" />
        </div>
      </div>
      <div v-else-if="type == 3">
        <div class="van-cell-row">
          <div class="row-lable">
            银行卡号
          </div>
          <u-input v-model="pay.bank_num" name="bank_num" type="digit" clearable :disabled="pay.is_up === 1"
            :placeholder="'请输入银行卡号'" :rules="[{ validator: bankNumValidator, message: '请输入正确内容' }]" />
        </div>
        <div class="van-cell-row">
          <div class="row-lable">
            持卡人姓名
          </div>
          <u-input v-model="pay.name" name="name" clearable :disabled="pay.is_up === 1" :placeholder="'请输入持卡人名字'"
            :rules="[{ validator: nameValidator, message: '请输入正确内容' }]" />
        </div>
        <div class="van-cell-row">
          <div class="row-lable">
            所属银行
          </div>
          <u-input v-model="pay.account_num" name="account_num" clearable :disabled="pay.is_up === 1"
            :placeholder="'请输入银行'" :rules="[{ required:true, message: '请输入正确内容' }]" />
        </div>
        <!-- <div class="van-cell-row">
              <div class="row-lable">支行名称</div>
              <van-field v-model="pay.account_detail" name="account_detail" clearable :disabled="pay.is_up === 1" :placeholder="'请输入支行'" :rules="[{ required:true, message: '请输入正确内容' }]" />
            </div> -->
      </div>
      <div v-if="type == 4">
        <div class="van-cell-row">
          <div class="row-lable">
            USDT地址
          </div>
          <u-input v-model="pay.account_num" name="account_num" clearable :disabled="pay.is_up === 1"
            :placeholder="'请输入USDT地址'" :rules="[{ validator: accountValidator, message: '请输入正确内容' }]" />
        </div>
      </div>
      <div v-if="pay.is_up === 0" class="van-cell-row">
        <div class="row-lable">
          请输入密码
        </div>
        <u-input v-model="pay.password" name="password" type="password" clearable placeholder="请输入支付密码"
          :rules="[{ required:true, message: '请输入正确内容' }]" />
      </div>
      <div class="u-flex u-ju-center">
        <div v-if="type != 3" class="van-upload-div">
          <u-upload width="250" height="250" uploadIcon="plus" v-if="pay.is_up == 0" uploadText='添加二维码'
            :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1">
          </u-upload>
          <image v-else :src="urlBase" mode="widthFix"></image>
          <!-- <van-uploader v-model="fileList" :deletable="pay.is_up === 1" multiple :max-count="1" :before-read="beforeRead" :after-read="afterRead">
                <div class="flex-between-center upload-div">
                  <van-icon name="plus" />
                  <span>添加二维码</span>
                </div>
              </van-uploader> -->
        </div>
      </div>

      <div v-if="pay.is_up == 0" style="">
        <u-button @click="onSubmit">确认</u-button>
      </div>
    </view>

  </div>
</template>

<script>
  import {
    getReceiveMoneyWayIndex,
    putReceiveMoneyWay
  } from '@/api/index.js'
  import md5 from '@/utils/md5.js'
  import {
    url_config
  } from '@/common/config.js'
  export default {
    filters: {
      fixType(val) {
        return val == 1 ? '支付宝' : val == 2 ? '微信' : val == 3 ? '银行卡' : ''
      }
    },
    data() {
      return {
        pay: {
          title: '',
          account: '', // 账号、开户行
          name: '', // 昵称、持卡人姓名
          password: '', // 密码
          url: '', // 图片地址
          bank_num: '', // 卡号
          account_detail: '' // 支行
        },
        urlBase: '',
        fileList1: [],
        type: 0
      }
    },
    onLoad(opt) {
      this.type = opt.type
      if (this.type == 1) {
        this.title = '支付宝收款码管理'
      } else if (this.type == 2) {
        this.title = '微信收款码管理'
      } else {
        this.title = '银行卡管理'
      }
      this.getInfo()
    },
    methods: {
      getInfo() {
        getReceiveMoneyWayIndex({
          type: this.type
        }).then(res => {
          if (res.code == 1) {
            const pay = res.data
            if (typeof pay === 'object') {
              this.pay = pay
              if (pay.is_up == 1) {
                this.urlBase = pay.receive_qrcode || ''
              }
            } else {
              this.pay = {}
            }
          }
        })
      },
      onSubmit() {
        var values = {}
        const vm = this
        if (vm.type !== '3') {
          // if (vm.fileList.length === 0) {
          //   vm.$ui.toast('请上传收款码')
          //   return
          // }
        }
        values.password = md5.hex_md5(vm.pay.password)
        values.receive_qrcode = vm.pay.receive_qrcode
        values.type = vm.type
        values.name = vm.pay.name
        values.account_num = vm.pay.account_num
        putReceiveMoneyWay(values).then(res => {
          if (res.code === 1) {
            vm.$ui.toast('操作成功')
            uni.navigateBack()
            // setTimeout(() => {
            //   vm.$router.go(-1)
            //   // vm.time = ''
            //   // clearInterval(this.setInt)
            //   // vm.get_info()
            // }, 1000)
          } else {
            vm.$ui.toast(res.msg)
          }
        })
      },
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          console.log(result, 1231456789);
          if (result.code == 1) {
            this.pay.receive_qrcode = result.url
          } else {
            this.$ui.toast('上传失败')
          }
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: `${url_config}/api/upload/uploads`, // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              const date = JSON.stringify(res.data)
              setTimeout(() => {
                resolve(JSON.parse(res.data))
              }, 1000)
            }
          });
        })
      },
      // 上传前处理
      beforeRead(file) {
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
          Toast('请上传 jpg/png 格式图片')
          return false
        }
        return true
      },
      // 验证账号
      accountValidator(value) {
        return true
      },
      // 验证卡号
      bankNumValidator(value) {
        if (!this.$valid.isBacknumber(value)) {
          this.$ui.toast('请输入正确的卡号')
          return false
        } else {
          return true
        }
      },
      // 验证名字
      nameValidator(value) {
        if (!this.$valid.isRealName(value)) {
          this.$ui.toast('请输入中文姓名')
          return false
        } else {
          return true
        }
      }
    }
  }
</script>

<style lang="less">
  .uicon-plus {
    font-size: 70rpx !important;
  }

  .u-upload__button {
    background-color: #ececec !important;
  }

  .set-pay {
    .van-form {
      padding: 30rpx 40rpx;

      .van-cell-row {
        margin-bottom: 60rpx;

        .row-lable {
          // color: #1d1b1f;
          margin-bottom: 28rpx;
        }

        .van-cell {
          width: 100%;
          height: 88rpx;
          line-height: 88rpx;
          padding: 0 20rpx;
          margin: 0;
          background: #ececec;
          border-radius: 6rpx;
          // border-bottom: 2rpx solid #232323;
        }
      }



      .vant-btn {
        margin-top: 130rpx;
        padding: 0 30rpx;

        .van-button {
          // box-shadow: rgba(#000000, 0.16) 0 6rpx 12rpx -6rpx;
        }
      }
    }
  }
</style>

<style lang="less">
  .set-pay {
    .van-form {
      .van-field__control::input-placeholder {
        color: #ACACAC;
      }

      ::-webkit-input-placeholder {
        color: #ACACAC;
      }

      :-moz-placeholder {
        color: #ACACAC;
      }

      ::-moz-placeholder {
        color: #ACACAC;
      }

      :-ms-input-placeholder {
        color: #ACACAC;
      }

      .upload-div,
      .van-uploader__preview-image {
        width: 396rpx;
        height: 396rpx;
      }

      .upload-div {
        color: #D2D2D2;
        background: #ECECEC;
        flex-direction: column;
        justify-content: center;

        .van-icon {
          font-size: 70rpx;
          color: #D2D2D2;
          margin-bottom: 24rpx;
        }
      }

      .van-uploader__mask-icon {
        font-size: 50rpx;
      }

      .van-uploader__preview-delete {
        width: 50rpx;
        height: 50rpx;
        border-radius: 0 0 0 40rpx;
      }

      .van-uploader__preview-delete-icon {
        font-size: 50rpx;
      }

      .van-uploader__preview {
        margin: 0;
      }
    }
  }
</style>
